<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>数据分析</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/modern-unified.css" rel="stylesheet" />
		<style>
			body {
				min-height: 100vh;
			}
			.modern-chart-card {
				background: rgba(255,255,255,0.92);
				border-radius: 16px;
				box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.03);
				padding: 24px 16px 8px 16px;
				margin-bottom: 24px;
				backdrop-filter: blur(16px);
			}
			.modern-chart-title {
				font-size: 18px;
				font-weight: 600;
				color: #27ae60;
				margin-bottom: 12px;
				text-align: center;
			}
			.modern-chart {
				width: 100%;
				height: 260px;
				margin-bottom: 8px;
			}
			.modern-select-btn {
				margin-bottom: 24px;
				display: flex;
				justify-content: center;
			}
			.modern-select-btn .modern-btn-outline {
				min-width: 160px;
			}
			@media (max-width: 600px) {
				.modern-chart-card {
					padding: 12px 4px 4px 4px;
					border-radius: 10px;
				}
				.modern-chart {
					height: 180px;
				}
			}
		</style>
	</head>

	<body>
		<header class="modern-header" style="justify-content: center;">
			<h1>数据分析</h1>
		</header>
		<div class="modern-container">
			<div class="modern-select-btn">
				<button id="search" type="button" class="modern-btn modern-btn-outline">
					<span class="mui-icon mui-icon-search" style="color: #27ae60;"></span>
					<span style="color: #34495E;">请选择大棚</span>
				</button>
			</div>
			<div class="modern-chart-card">
				<div class="modern-chart-title">温度</div>
				<div id="temperature" class="modern-chart"></div>
			</div>
			<div class="modern-chart-card">
				<div class="modern-chart-title">湿度</div>
				<div id="humi" class="modern-chart"></div>
			</div>
			<div class="modern-chart-card">
				<div class="modern-chart-title">烟雾</div>
				<div id="smoke" class="modern-chart"></div>
			</div>
			<div class="modern-chart-card">
				<div class="modern-chart-title">PM2.5</div>
				<div id="pm25" class="modern-chart"></div>
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/echarts.min.js"></script>
		<script src="../js/request.js"></script>
		<script type="text/javascript">
			let greenhouseId = null;
			let reportData = {
				times: [],
				temperature: [],
				humi: [],
				smoke: [],
				pm25: [],
			}
			let greenhouseList = [];

			mui.init()

			window.addEventListener('refresh', function(event) {
				refresh()
			});
			
			mui("body").on("tap", "#search", function(event) {
				plus.nativeUI.actionSheet({
					title: "选择大棚",
					cancel: "取消",
					buttons: greenhouseList,
				}, function(bt) {
					if (bt.index > 0) {
						greenhouseId = greenhouseList[bt.index - 1].greenhouseId;
						refresh();
					}
				})
			})

			function refresh() {
				getReportData()
				displayReport()
				loadGreenhouseList()
			}

			function displayReport() {
				displayTemperature()
				displayHumi()
				displaySmoke()
				displayPM25()
			}

			//显示温度
			function displayTemperature() {
				let tempOption = {
					title: { show: false },
					tooltip: { show: true },
					xAxis: {
						type: 'category',
						data: reportData.times,
						axisLabel: { rotate: 45 },
						axisLine: { show: true, lineStyle: { color: '#27ae60' } },
						splitLine: { show: true, lineStyle: { color: '#e0f5e9' } }
					},
					yAxis: [{
						type: 'value',
						name: '°C',
						min: 0,
						max: function(value) {
							return value.max * 1.2 > 10 ? Math.ceil(value.max * 1.2) : 10;
						},
						axisLine: { show: true, lineStyle: { color: '#27ae60' } },
						splitLine: { show: true, lineStyle: { color: '#e0f5e9' } }
					}],
					series: [{
						name: '温度',
						type: 'line',
						data: reportData.temperature,
						smooth: true,
						lineStyle: { width: 3, color: '#27ae60' },
						itemStyle: { color: '#27ae60' },
						areaStyle: { color: 'rgba(46,204,113,0.08)' }
					}]
				};
				var myChart = echarts.init(document.getElementById('temperature'));
				myChart.setOption(tempOption);
				return myChart
			}

			//显示湿度
			function displayHumi() {
				let tempOption = {
					title: { show: false },
					tooltip: { show: true },
					xAxis: {
						type: 'category',
						data: reportData.times,
						axisLabel: { rotate: 45 },
						axisLine: { show: true, lineStyle: { color: '#27ae60' } },
						splitLine: { show: true, lineStyle: { color: '#e0f5e9' } }
					},
					yAxis: [{
						type: 'value',
						name: '%',
						min: 0,
						max: function(value) {
							return value.max * 1.2 > 10 ? Math.ceil(value.max * 1.2) : 10;
						},
						axisLine: { show: true, lineStyle: { color: '#27ae60' } },
						splitLine: { show: true, lineStyle: { color: '#e0f5e9' } }
					}],
					series: [{
						name: '湿度',
						type: 'line',
						data: reportData.humi,
						smooth: true,
						lineStyle: { width: 3, color: '#00b894' },
						itemStyle: { color: '#00b894' },
						areaStyle: { color: 'rgba(0,184,148,0.08)' }
					}]
				};
				var myChart = echarts.init(document.getElementById('humi'));
				myChart.setOption(tempOption);
				return myChart
			}

			//显示烟雾
			function displaySmoke() {
				let tempOption = {
					title: { show: false },
					tooltip: { show: true },
					xAxis: {
						type: 'category',
						data: reportData.times,
						axisLabel: { rotate: 45 },
						axisLine: { show: true, lineStyle: { color: '#27ae60' } },
						splitLine: { show: true, lineStyle: { color: '#e0f5e9' } }
					},
					yAxis: [{
						type: 'value',
						name: '',
						min: 0,
						max: function(value) {
							return value.max * 1.2 > 10 ? Math.ceil(value.max * 1.2) : 10;
						},
						axisLine: { show: true, lineStyle: { color: '#27ae60' } },
						splitLine: { show: true, lineStyle: { color: '#e0f5e9' } }
					}],
					series: [{
						name: '烟雾',
						type: 'line',
						data: reportData.smoke,
						smooth: true,
						lineStyle: { width: 3, color: '#6366f1' },
						itemStyle: { color: '#6366f1' },
						areaStyle: { color: 'rgba(99,102,241,0.08)' }
					}]
				};
				var myChart = echarts.init(document.getElementById('smoke'));
				myChart.setOption(tempOption);
				return myChart
			}

			//显示PM25
			function displayPM25() {
				let tempOption = {
					title: { show: false },
					tooltip: { show: true },
					xAxis: {
						type: 'category',
						data: reportData.times,
						axisLabel: { rotate: 45 },
						axisLine: { show: true, lineStyle: { color: '#27ae60' } },
						splitLine: { show: true, lineStyle: { color: '#e0f5e9' } }
					},
					yAxis: [{
						type: 'value',
						name: '',
						min: 0,
						max: function(value) {
							return value.max * 1.2 > 10 ? Math.ceil(value.max * 1.2) : 10;
						},
						axisLine: { show: true, lineStyle: { color: '#27ae60' } },
						splitLine: { show: true, lineStyle: { color: '#e0f5e9' } }
					}],
					series: [{
						name: 'PM2.5',
						type: 'line',
						data: reportData.pm25,
						smooth: true,
						lineStyle: { width: 3, color: '#fd7e14' },
						itemStyle: { color: '#fd7e14' },
						areaStyle: { color: 'rgba(253,126,20,0.08)' }
					}]
				};
				var myChart = echarts.init(document.getElementById('pm25'));
				myChart.setOption(tempOption);
				return myChart
			}

			function getReportData() {
				let params = {
					"greenhouseId": greenhouseId,
				}
				request.get('/system/ghMonitor/report/hour', params, (resp) => {
					const data = resp.data
					reportData.times = data.times
					reportData.temperature = data.temperature
					reportData.humi = data.humi
					reportData.smoke = data.smoke
					reportData.pm25 = data.pm25
					displayReport()
				}, (error, thrown) => {
					//发生错误时，回调
					console.error('调用服务端获取报表失败', error)
				})
			}
			
			//获取大棚列表
			function loadGreenhouseList() {
				greenhouseList = [];
				let data = {}
				request.get('/system/greenhouse/list', data, (data) => {
					let list = data.rows;
					list.forEach(row => {
						let id = row.id;
						let name = row.name;
						greenhouseList.push({
							greenhouseId: id,
							title: name,
						})
					});
				}, (error, thrown) => {
					console.error('调用服务端获取大棚信息失败', error);
				})
			}
		</script>
	</body>

</html>